<template>
  <view class="message">
    <view class="message-header">
      <CustomNavbarHome :left="0" :bg="navStyle.bgColor">
        <view class="navbarTitle gradient-text">
          {{ navbarTitle }}
        </view>
      </CustomNavbarHome>
      <view class="page-menu">
        <view class="menu-wrap">
          <view class="menu-item" v-for="(item, index) in menuList" :key="index" @click="menuHandler">
            <view class="menu-bg">
              <image :src="item.image" alt="" srcset="" />
              <view class="menu-text">{{ item.content }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="conversation-wrapper">
      <view class="conversation-list-wrapper" style="height: calc(100% - 280rpx)">
        <view class="conversation-item-container" @click="clickMenuHandler('tg')">
          <view class="conversation-item-content">
            <view class="conversation-item-left">
              <view class="unread">
                <!-- <view class="badge">2</view> -->
              </view>
              <view class="avatar" style="width: 84rpx; height: 84rpx">
                <!-- <view class="img-mask"></view> -->
                <!-- <image
                  class="avatar-img"
                  src="https://video.rmshort.com/ee44d5fcvodcq1308171050/3c9665411253642696431980250/8HbAWCJ6OsQA.png"
                /> -->
                <u--image width="84rpx" height="84rpx" src="" />
                <!-- <view class="avatar-name-wrapper" style="background-color: rgb(133, 79, 226)">
                  <view class="avatar-name-text">22</view>
                </view> -->
              </view>
            </view>
            <view class="conversation-item-right">
              <view class="conversation-item-top"
                ><span class="conversation-item-title" style="color: rgb(255, 255, 255)"
                  >BtcShort Telegram</span
                >
                <!-- <span class="conversation-item-time">05-11 14:25</span> -->
              </view>
              <view class="conversation-item-desc"
                ><span class="conversation-item-desc-content">Contact Now</span></view
              >
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import CustomNavbarHome from '../../components/CustomNavbar-home.vue'
import { h5Address } from '../../env' 
export default {
  components: { CustomNavbarHome },
  data() {
    return {
      navbarTitle: 'Info',
      // 导航标题栏的高度
      navStyle: {
        marginLeft: 50,
        bgColor: '#000',
        transform: -50,
        searchText: 'none',
        searchWidth: 'auto'
      },
      menuList: [
        {
          image: require('../../static/images/news_icon0.png'),
          content: 'How to make money'
        },
        {
          image: require('../../static/images/news_icon2.png'),
          content: 'New Product',
          path: h5Address
        },
        {
          image: require('../../static/images/news_icon3.png'),
          content: 'About BtcShort',
          path: h5Address
        },
        {
          image: require('../../static/images/news_icon4.png'),
          content: 'Copyright center'
        }
      ]
    }
  },
  methods: {
    clickMenuHandler(e) {
      if (e === 'tg') {
        let url = 'https://t.me/BtcShort8'
        try{
          plus.runtime.openURL(url)
        }catch(err){
          window.location.href = url
        }
      }
    },
    menuHandler(item){
      // uni.showToast({titile: 'pages/videoWebView/webview'})
      // uni.navigateTo({ url: `/pages/videoWebView/webview?url=${item.path}` })
      // item.path && this.jumpView(`/pages/videoWebView/webview?url=${item.path}`)
    }
  }
}
</script>

<style lang="less" scoped>
.message {
  height: 100vh;
  overflow: hidden;

  .message-header {
    padding: 0 25rpx;
    background-color: black;
  }

  .page-menu {
    padding-bottom: 25rpx;

    .menu-wrap {
      display: flex;
      justify-content: space-between;

      .menu-item {
        position: relative;
        box-sizing: border-box;
        width: 23.5%;
        background: linear-gradient(138deg, rgb(96, 132, 244) 0%, rgb(183, 145, 246) 100%);
        border-radius: 15rpx;

        image {
          width: 100%;
          height: 210rpx;
        }

        .menu-text {
          // width: 120rpx;
          height: 50rpx;
          vertical-align: middle;
          position: absolute;
          bottom: 20rpx;
          left: 0;
          right: 0;
          font-family: 'Source Han Sans SC', 'Source Han Sans SC';
          font-weight: 900;
          font-size: 22rpx;
          word-wrap: break-word;
          word-break: break-word;
          color: rgb(255, 255, 255);
          text-align: center;
          font-style: normal;
          text-transform: none;
          padding: 0 15rpx;
          line-height: 1.2;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }

  .conversation-wrapper {
    height: 100vh;
    overflow: hidden;
    // margin-top: 10rpx;

    .conversation-list-wrapper {
      height: calc(100% - 3.75rem - var(--status-bar-height));
      box-sizing: border-box;
      width: 100%;
      overflow: hidden;
      padding-top: 25rpx;
      background: rgb(36, 30, 66);
      border-radius: 35rpx 35rpx 0px 0px;

      .conversation-item-container {
        position: relative;
        transition: transform 0.3s;

        .conversation-item-content {
          display: flex;
          align-items: center;
          padding: 20rpx 0;
          margin: 0 24rpx;
          min-height: 144rpx;
          box-sizing: border-box;
          border-bottom: 2rpx solid #3e3857;
          .conversation-item-left {
            position: relative;
            .unread {
              position: absolute;
              right: 0;
              z-index: 99;
            }
            .badge {
              background-color: #ff4d4f;
              color: #fff;
              font-size: 24rpx;
              min-width: 40rpx;
              height: 40rpx;
              line-height: 38rpx;
              border-radius: 20rpx;
              padding: 0 10rpx;
              box-sizing: border-box;
              text-align: center;
              z-index: 99;
              position: relative;
            }
            .avatar {
              overflow: hidden;
              border-radius: 50%;
              flex-shrink: 0;
              position: relative;
              .img-mask {
                position: absolute;
                z-index: 10;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                opacity: 0;
              }
              .avatar-img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                background-color: #fff;
              }
            }
          }
          .conversation-item-right {
            flex: 1;
            width: 0;
            margin-left: 20rpx;
            .conversation-item-top {
              margin-bottom: 10rpx;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .conversation-item-title {
                font-size: 28rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                color: #fff !important;
              }
              .conversation-item-time {
                font-size: 24rpx;
                color: #ccc;
                text-align: right;
                // width: 90px;
                flex-shrink: 0;
              }
            }
            .conversation-item-desc {
              font-size: 24rpx;
              color: #999;
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-between;
              .conversation-item-desc-content {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                flex: 1;
                color: #94929e;
              }
            }
          }
        }
      }
    }
  }
}

.navbarTitle {
  margin-left: 58rpx;
  font-family: Myriad Pro;
  font-weight: bold;
  font-size: 40rpx;
  color: #fdfdfd;
  line-height: 73rpx;
}
</style>
